<template>
    <div class="step_three">
        <div class="step_three_content">
            <div id="lottery_num_setting" class="title">参与设置</div>
            <el-form label-width="auto" :disabled="status == '2' && type === 'edit'" class="form">
                <el-form-item label="抽奖限制" prop="default_lottery_num">
                    <div>
                        默认抽奖次数
                        <el-input-number
                            v-model="form.default_lottery_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0"
                            @blur="onDefaultLotteryNum" />
                        次
                    </div>
                </el-form-item>
                <el-form-item prop="max_lottery_num">
                    <div style="margin-left: 124px">
                        每人最多可抽奖
                        <el-input-number
                            v-model="form.max_lottery_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0"
                            @blur="onMaxLotteryNum" />
                        次
                    </div>
                </el-form-item>
                <el-form-item prop="day_max_lottery_num">
                    <div style="margin-left: 124px">
                        每人每天可抽奖
                        <el-input-number
                            v-model="form.day_max_lottery_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0"
                            :max="form.max_lottery_num" />
                        次
                    </div>
                </el-form-item>
                <el-form-item label="性别限制">
                    <el-radio-group v-model="form.gender_restrict">
                        <el-radio :label="1">不限</el-radio>
                        <el-radio :label="2">男</el-radio>
                        <el-radio :label="3">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item id="area_restrict" label="区域限制" :required="[2, 3].includes(form.area_restrict)">
                    <el-radio-group v-model="form.area_restrict">
                        <el-radio :label="1">不限</el-radio>
                        <el-radio :label="2">可参与地区</el-radio>
                        <el-radio :label="3">不可参与地区</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="[2, 3].includes(form.area_restrict)" class="effect_time area-restrict">
                    <el-cascader
                        v-model="form.area_value"
                        :options="cityData"
                        :props="defaultProps"
                        style="width: 330px" />
                </el-form-item>
                <el-form-item label="参与者加好友顺序">
                    <el-radio-group v-model="form.add_friend_type">
                        <el-radio :label="1">
                            <Popover text="抽奖前" content="需要添加好友才能抽奖" />
                        </el-radio>
                        <el-radio :label="2">
                            <Popover text="领奖时" content="领奖时需要添加好友" />
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="divider"></div>
                <div id="win_num_setting" class="title">中奖配置</div>
                <el-form-item label="中奖次数设置" prop="max_win_num">
                    <div>
                        每人最多可中奖
                        <el-input-number
                            v-model="form.max_win_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0"
                            :max="form.max_lottery_num" />
                        次
                    </div>
                </el-form-item>
                <el-form-item prop="day_max_win_num">
                    <div style="margin-left: 124px">
                        每人每天可中奖
                        <el-input-number
                            v-model="form.day_max_win_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0"
                            :max="form.max_win_num" />
                        次
                    </div>
                </el-form-item>
                <div class="divider"></div>
                <div id="help_num_setting" class="title">助力设置</div>
                <el-form-item label="邀请限制" prop="max_win_num">
                    <div>
                        邀请
                        <el-input-number
                            v-model="form.invite_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0" />
                        人，可增加
                        <el-input-number
                            v-model="form.add_lottery_num"
                            size="small"
                            :min="1"
                            :max="form.max_add_lottery_num"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0" />
                        次抽奖机会
                    </div>
                </el-form-item>
                <el-form-item prop="max_win_num">
                    <div style="margin-left: 124px">
                        每人最多可邀请获得
                        <el-input-number
                            v-model="form.max_add_lottery_num"
                            size="small"
                            :min="1"
                            :max="form.max_lottery_num"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0" />
                        次抽奖机会
                    </div>
                </el-form-item>
                <el-form-item label="邀请描述">
                    <el-switch v-model="form.invite_desc_switch" :active-value="1" :inactive-value="2" />
                    打开后，显示默认邀请描述
                </el-form-item>
                <el-form-item label="助力者设置">
                    <div class="assist_flex">
                        <div class="label">新用户限制</div>
                        <el-radio-group v-model="form.new_restrict">
                            <el-radio :label="1">不限</el-radio>
                            <el-radio :label="2">
                                <Popover text="仅限新用户" content="未添加过企业员工且没有助力过的客户" />
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="assist_flex" style="margin-left: 124px">
                        <div class="label">性别限制</div>
                        <el-radio-group v-model="form.assist_gender_restrict">
                            <el-radio :label="1">不限</el-radio>
                            <el-radio :label="2">男</el-radio>
                            <el-radio :label="3">女</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item id="assist_area_restrict">
                    <div class="assist_flex" style="margin-left: 124px">
                        <div :class="[2, 3].includes(form.assist_area_restrict) ? 'label required' : 'label'">
                            区域限制
                        </div>
                        <el-radio-group v-model="form.assist_area_restrict">
                            <el-radio :label="1">不限</el-radio>
                            <el-radio :label="2">可参与地区</el-radio>
                            <el-radio :label="3">不可参与地区</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item v-if="[2, 3].includes(form.assist_area_restrict)" class="effect_time area-restrict">
                    <el-cascader
                        v-model="form.assist_area_value"
                        :options="cityData"
                        :props="defaultProps"
                        style="width: 330px" />
                </el-form-item>
                <el-form-item label="助力条件">
                    <el-radio-group v-model="form.assist_condition">
                        <el-radio :label="1">
                            <Popover text="进入活动" content="助力者进入活动页面点击抽奖且满足助力的条件则助力成功" />
                        </el-radio>
                        <el-radio :label="2">
                            <Popover text="添加好友" content="助力者满足助力条件并添加引流员工助力成功" />
                        </el-radio>
                    </el-radio-group>
                </el-form-item>

                <div class="divider"></div>
                <div id="flowRestrict" class="title">防刷设置</div>
                <el-form-item label="防刷设置">
                    <el-switch v-model="form.flow_restrict" :active-value="1" :inactive-value="2" />
                </el-form-item>
                <div v-if="form.flow_restrict == 1" class="flow_restrict">
                    <div>在</div>
                    <el-input-number
                        v-model="form.flow_second"
                        size="small"
                        :min="1"
                        :controls="false"
                        placeholder="请输入"
                        :precision="0" />
                    <div>秒内，同一用户助力人数超过</div>
                    <div>
                        <el-input-number
                            v-model="form.flow_assist_num"
                            size="small"
                            :min="1"
                            :controls="false"
                            placeholder="请输入"
                            :precision="0" />
                    </div>
                    <div>
                        <Popover text="人，自动拉黑" content="拉黑后该用户无法继续参与活动" />
                    </div>
                </div>
                <div class="divider"></div>
                <div class="title">标签设置</div>
                <div id="audo_tag" class="audo_tag">自动打标签</div>
            </el-form>
            <AutoTag ref="AutoTagRef" />
        </div>
        <div class="reward_right">
            <ActivityPhone :invite-desc-switch="form.invite_desc_switch" :reward-info="rewardInfo" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Popover from './Popover.vue';
import AutoTag from './AutoTag.vue';
import ActivityPhone from '@/components/zw/phonePreview/activityPhonePreview/luckDraw/index.vue';

import cityData from '@/assets/js/city';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const route = useRoute();
const status = route.query.status;
const type = route.query.type;
const form = reactive({
    default_lottery_num: 1,
    max_lottery_num: 10,
    day_max_lottery_num: 5,
    gender_restrict: 1,
    area_restrict: 1,
    area_value: [],
    add_friend_type: 1,

    max_win_num: 10,
    day_max_win_num: 5,
    invite_num: 1,
    add_lottery_num: 1,
    max_add_lottery_num: 10,

    new_restrict: 1,
    assist_gender_restrict: 1,
    assist_area_restrict: 1,
    assist_area_value: [],
    assist_condition: 1,
    invite_desc_switch: 1,

    flow_restrict: 1,
    flow_second: 1,
    flow_assist_num: 50
});

const rewardInfo = ref<any>([]);
const tag = ref([]);
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'code'
};
const onDefaultLotteryNum = () => {
    if (form.default_lottery_num > form.max_lottery_num) {
        ElMessage.warning('不能大于最多可抽奖次数');
        form.default_lottery_num = 1;
    }
};
const onMaxLotteryNum = () => {
    if (form.max_lottery_num < form.default_lottery_num) {
        ElMessage.warning('不能小于默认抽奖次数');
        form.max_lottery_num = form.default_lottery_num;
    }
    form.day_max_lottery_num = 1;
    form.max_win_num = 1;
    form.day_max_win_num = 1;
    form.add_lottery_num = 1;
    form.max_add_lottery_num = 1;
};
const AutoTagRef = ref<any>(null);
// 兜底校验
const validate = () => {
    return new Promise((resolve, reject) => {
        // 校验参与设置
        const lotteryNum = {
            default_lottery_num: '请输入默认抽奖次数',
            max_lottery_num: '请输入每人最多可抽奖次数',
            day_max_lottery_num: '请输入每人每天可抽奖次数'
        };
        for (const [key, value] of Object.entries(lotteryNum)) {
            if (!form[key]) {
                document.querySelector('#lottery_num_setting')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning(value);
                return;
            }
        }

        // 校验中奖设置
        const winNum = {
            max_win_num: '请输入每人最多可中奖次数',
            day_max_win_num: '请输入每人每天可中奖次数'
        };
        for (const [key, value] of Object.entries(winNum)) {
            if (!form[key]) {
                document.querySelector('#win_num_setting')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning(value);
                return;
            }
        }

        // 校验助力设置人数
        const helpNum = {
            invite_num: '请输入邀请人数',
            add_lottery_num: '请输入邀请人数可增加抽奖的次数',
            max_add_lottery_num: '请输入每人最多可邀请获得的抽奖次数'
        };
        for (const [key, value] of Object.entries(helpNum)) {
            if (!form[key]) {
                document.querySelector('#help_num_setting')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning(value);
                return;
            }
        }

        // 校验防刷
        if (form.flow_restrict === 1) {
            const flowNum = {
                flow_second: '请输入防刷设置秒数',
                flow_assist_num: '请输入自动拉黑同一用户助力超过的人数'
            };
            for (const [key, value] of Object.entries(flowNum)) {
                if (!form[key]) {
                    document.querySelector('#flowRestrict')?.scrollIntoView({ behavior: 'smooth' });
                    ElMessage.warning(value);
                    return;
                }
            }
        }

        tag.value = AutoTagRef.value.tag;
        if ([2, 3].includes(form.area_restrict)) {
            if (form.area_value.length == 0) {
                document.querySelector('#area_restrict')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning('请选择区域');
                return;
            }
        }
        if ([2, 3].includes(form.assist_area_restrict)) {
            if (form.assist_area_value.length == 0) {
                document.querySelector('#assist_area_restrict')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning('请选择区域');
                return;
            }
        }
        for (let i = 0; i < tag.value.length; i++) {
            // 请设置奖品名称
            if (tag.value[i].type == 3) {
                if (!tag.value[i].reward_name) {
                    document.querySelector('#audo_tag')?.scrollIntoView({ behavior: 'smooth' });
                    ElMessage.warning('请选择奖品');
                    return;
                }
            }
            if (tag.value[i].tag_ids.length == 0) {
                document.querySelector('#audo_tag')?.scrollIntoView({ behavior: 'smooth' });
                ElMessage.warning('请选择标签');
                AutoTagRef.value.activeName = i.toString();
                return;
            }
        }
        resolve(true);
    });
};
defineExpose({
    form,
    rewardInfo,
    tag,
    validate
});
</script>

<style scoped lang="scss">
.step_three {
    // width: 520px; 929799
    display: flex;
    align-items: center;

    .title {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 500;
        color: #33302d;

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: #ff6b00;
            margin-right: 6px;
            vertical-align: top;
        }
    }

    .assist_flex {
        display: flex;

        .label {
            width: 82px;
            text-align: right;
            margin-right: 10px;
        }

        .required {
            &::before {
                content: '*';
                color: var(--el-color-danger);
                margin-right: 4px;
            }
        }
    }
}

.el-form-item {
    margin-bottom: 10px;
}

.divider {
    width: 800px;
    height: 1px;
    background: #e5e5e5;
    margin: 24px 0;
}

.flow_restrict {
    display: flex;
    align-items: center;
    padding: 0 0 0 56px;
    font-size: 14px;
    color: #606266;

    div {
        margin: 0 3px;
    }
}

.audo_tag {
    margin: 0 0 15px 12px;
    font-size: 14px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #33302d;
}

.activity_form {
    display: flex;
    align-items: center;

    img {
        width: 16px;
        margin-left: 4px;
    }
}

.auth_setting {
    margin-left: 20px;
}

.effect_time {
    margin-bottom: 24px;
}

.area-restrict {
    margin-left: 124px;
}
</style>
